<template>
  <div class="container">
    <salaryTopTitle></salaryTopTitle>
    <!-- <createSalaryStepJz :activeIndex="activeIndex"></createSalaryStepJz> -->
    <!--支付信息-->
    <div class="mainCon">
      <createSalaryStepJz :activeIndex="activeIndex"></createSalaryStepJz>
      <div class="vessel">
        <p>
          <i class="icon iconfont iconwancheng"></i>
        </p>
        <p class="reportTitle">上报成功，请授权发放工资</p>
        <div class="reportWrap">
          <p>工资表已上报</p>
          <p class="secondpa">
            工资表应发总人数为
            <span class="numStyle">100人</span>，&nbsp;工资表应发工资总额为
            <span class="numStyle">￥1,200</span>
          </p>
          <p class="secondpa">
            请携带面额为
            <span class="numStyle">￥1,200</span
            >的支票以及工资代发授权单前往银行提供工资表批次号授权银行发放工资。
          </p>
          <p>（如后续需下载工资代发授权单，请前往工资表详情页面下载）</p>
        </div>
        <div class="btnContainer">
          <p>
            <a href="javascript:;" class="driveDownload">下载工资代发授权单</a>
          </p>
          <el-button class="commonBut" @click="toSalaryList"
            >返回工资表管理</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import salaryTopTitle from '@/components/publicCom/salaryTopTitle'
import createSalaryStepJz from '@/components/publicCom/createSalaryStepJz'

export default {
  name: 'onlineAuthorization',
  components: {
    salary,
    createSalaryStepJz,
  },
  data() {
    return {
      activeIndex: 2,
    }
  },
  created() {
    this.salaryId = this.$route.query.salaryId
  },
  methods: {
    //返回工资表管理
    toSalaryList() {},
    //去授权发放
    authorizedToIssue() {},
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
  color: #666;
  font-size: 14px;
  .vessel {
    text-align: center;
    margin-top: 60px;
    .reportTitle {
      font-size: 28px;
      color: #009588;
      margin: 36px 0;
    }
    .iconwancheng {
      font-size: 124px;
      color: #009588;
    }
    .reportWrap {
      padding: 20px 48px;
      margin: 0 auto;
      width: 700px;
      background: #f5f7fb;
      .secondpa {
        margin: 12px 0;
      }
      .canotPay {
        color: #e02020;
      }
    }
    .numStyle {
      color: #009588;
      font-weight: bold;
    }
    .accountPay {
      color: #f78b00;
      font-weight: bold;
    }
    .btnContainer {
      padding-top: 10px;
      .driveDownload {
        color: #0098ce;
        border-bottom: 1px solid #0098ce;
        &:hover {
          color: #0070f5;
          border-bottom: 1px solid #0070f5;
        }
      }
      .commonBut {
        margin-top: 14px;
      }
    }
  }
}
</style>
